<template>
  <div class="content_box">
    <VHeader :list-data="interimListData" :option-config="option" @change="search">
      <el-button circle icon="el-icon-delete" @click="deleteData('/deleteTest.do', deleteArr)" />
      <el-button circle icon="el-icon-plus" @click="addViews = true" />
      <el-button circle icon="el-icon-refresh-right" @click="getListData" />
    </VHeader>
    <el-drawer :visible.sync="singleDrawer" direction="rtl" title="单选题" @close="drawerClose">
      <el-form>
        <el-form-item label="科目">
          <el-cascader
            v-model="subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
      </el-form>
      <el-checkbox-group v-model="add_data.singles">
        <el-checkbox v-for="item in SinglesList" :key="item.key" :label="item.key" class="drawerCheckbox">
          {{ item.single_name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-drawer>
    <el-drawer :visible.sync="selectionsDrawer" direction="rtl" title="多选题" @close="drawerClose">
      <el-form>
        <el-form-item label="科目" size="small">
          <el-cascader
            v-model="subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
      </el-form>
      <el-checkbox-group v-model="add_data.selections">
        <el-checkbox v-for="item in selectionList" :key="item.key" :label="item.key" class="drawerCheckbox">
          {{ item.selection_name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-drawer>
    <el-drawer :visible.sync="judgeDrawer" direction="rtl" title="判断题" @close="drawerClose">
      <el-form>
        <el-form-item label="科目">
          <el-cascader
            v-model="subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
      </el-form>
      <el-checkbox-group v-model="add_data.judges">
        <el-checkbox v-for="item in judgesList" :key="item.key" :label="item.key" class="drawerCheckbox">
          {{ item.judge_name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-drawer>
    <el-dialog :visible.sync="addViews" destroy-on-close title="新建考试" top="5vh" width="40%">
      <el-form :model="add_data" :rules="add_rules" label-position="right" label-width="130px" @submit.native.prevent>
        <el-form-item label="考试名称" prop="test_name" size="small">
          <el-input v-model="add_data.test_name" clearable />
        </el-form-item>
        <el-form-item label="考试介绍" prop="exam_introduction" size="small">
          <el-input v-model="add_data.exam_introduction" clearable />
        </el-form-item>
        <el-form-item label="截止时间" prop="exam_deadline" size="small">
          <el-date-picker
            v-model="add_data.exam_deadline"
            align="right"
            format="yyyy-MM-dd  HH:mm:ss"
            placeholder="选择日期"
            type="date"
            value-format="timestamp"
          />
        </el-form-item>
        <el-form-item label="考试时长(分钟)" prop="time_limit" size="small">
          <el-input v-model="add_data.time_limit" clearable type="number" />
        </el-form-item>
        <el-form-item label="选择科目" prop="subject_name" size="small">
          <el-cascader
            v-model="add_data.subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            filterable
          />
        </el-form-item>
        <el-form-item label="单选题" prop="singles" size="small">
          <el-select
            v-model="add_data.singles"
            collapse-tags
            multiple
            popper-class="pop-div-my"
            placeholder="请选择"
            @click.native="singleDrawer = true"
          />
        </el-form-item>
        <el-form-item label="多选题" prop="selections" size="small">
          <el-select
            v-model="add_data.selections"
            collapse-tags
            multiple
            popper-class="pop-div-my"
            placeholder="请选择"
            @click.native="selectionsDrawer = true"
          />
        </el-form-item>
        <el-form-item label="判断题" prop="judges" size="small">
          <el-select
            v-model="add_data.judges"
            collapse-tags
            multiple
            popper-class="pop-div-my"
            placeholder="请选择"
            @click.native="judgeDrawer = true"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="add_data.test_name===''||add_data.exam_introduction===''||!add_data.exam_deadline||!add_data.time_limit||!add_data.subject_name || add_data.selections.length=== 0 || add_data.judges.length===0 || add_data.singles.length===0"
            type="primary"
            @click="addData"
          >新建
          </el-button>
          <el-button @click="addRe">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="editViews" destroy-on-close title="修改考试" top="5vh" width="40%">
      <el-form :model="editData" :rules="add_rules" label-position="right" label-width="130px" @submit.native.prevent>
        <el-form-item label="考试名称" prop="test_name" size="small">
          <el-input v-model="editData.test_name" clearable />
        </el-form-item>
        <el-form-item label="考试介绍" prop="exam_introduction" size="small">
          <el-input v-model="editData.exam_introduction" clearable />
        </el-form-item>
        <el-form-item label="截止时间" prop="exam_deadline" size="small">
          <el-date-picker
            v-model="editData.exam_deadline"
            align="right"
            format="yyyy-MM-dd  HH:mm:ss"
            placeholder="选择日期"
            type="date"
            value-format="timestamp"
          />
        </el-form-item>
        <el-form-item label="考试时长(分钟)" prop="time_limit" size="small">
          <el-input v-model="editData.time_limit" clearable type="number" />
        </el-form-item>
        <el-form-item label="选择科目" prop="subject_name" size="small">
          <el-cascader
            v-model="editData.subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            filterable
          />
        </el-form-item>
        <el-form-item label="单选题" prop="singles" size="small">
          <el-select
            v-model="editData.singles"
            collapse-tags
            multiple
            popper-class="pop-div-my"
            placeholder="请选择"
            @click.native="editSingleDrawer = true"
          />
        </el-form-item>
        <el-form-item label="多选题" prop="selections" size="small">
          <el-select
            v-model="editData.selections"
            collapse-tags
            multiple
            popper-class="pop-div-my"
            placeholder="请选择"
            @click.native="editSelectionsDrawer = true"
          />
        </el-form-item>
        <el-form-item label="判断题" prop="judges" size="small">
          <el-select
            v-model="editData.judges"
            collapse-tags
            multiple
            popper-class="pop-div-my"
            placeholder="请选择"
            @click.native="editJudgeDrawer = true"
          />
        </el-form-item>
        <el-form-item label="未截止" size="small">
          <el-switch v-model="editData.status" />
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="editData.test_name===''||editData.exam_introduction===''||!editData.exam_deadline||!editData.time_limit||editData.subject_name===''|| editData.selections.length===0|| editData.singles.length===0|| editData.judges.length===0"
            type="primary"
            @click="upData(editData)"
          >修改
          </el-button>
          <el-button @click="addRe">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-drawer :visible.sync="editSingleDrawer" direction="rtl" title="单选题" @close="drawerClose">
      <el-form>
        <el-form-item label="科目" size="small">
          <el-cascader
            v-model="subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
      </el-form>
      <el-form />
      <el-checkbox-group v-model="editData.singles">
        <el-checkbox v-for="item in SinglesList" :key="item.key" :label="item.key" class="drawerCheckbox">
          {{ item.single_name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-drawer>
    <el-drawer :visible.sync="editSelectionsDrawer" direction="rtl" title="多选题" @close="drawerClose">
      <el-form>
        <el-form-item label="科目" size="small">
          <el-cascader
            v-model="subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
      </el-form>
      <el-checkbox-group v-model="editData.selections">
        <el-checkbox v-for="item in selectionList" :key="item.key" :label="item.key" class="drawerCheckbox">
          {{ item.selection_name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-drawer>
    <el-drawer :visible.sync="editJudgeDrawer" direction="rtl" title="判断题" @close="drawerClose">
      <el-form>
        <el-form-item label="科目" size="small">
          <el-cascader
            v-model="subject_name"
            :options="subjectOption"
            :props="{ emitPath: false, label: 'label' }"
            :show-all-levels="false"
            clearable
            filterable
          />
        </el-form-item>
      </el-form>
      <el-checkbox-group v-model="editData.judges">
        <el-checkbox v-for="item in judgesList" :key="item.key" :label="item.key" class="drawerCheckbox">
          {{ item.judge_name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-drawer>
    <VTable
      :list-data="listData[pageConfig.Page - 1]"
      :loading="loading"
      :table-config="tableConfig"
      @select-change="selectChange"
    >
      <template v-slot:operate="scope">
        <el-button-group>
          <el-button icon="el-icon-edit" type="primary" @click="showUpData(scope.data.row)" />
          <el-button
            icon="el-icon-delete"
            type="primary"
            @click="deleteData('/deleteTest.do', [{ key: scope.data.row.key }])"
          />
        </el-button-group>
      </template>
      <template v-slot:A="scope">
        {{ scope.data.row.exam_deadline | Formatter }}
      </template>
      <template v-slot:B="scope">
        <el-switch v-model="scope.data.row.status" disabled />
      </template>
    </VTable>
    <el-pagination
      :current-page.sync="pageConfig.Page"
      :size-change="pageConfig.size"
      :total="pageConfig.total"
      background
      class="Pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
// 引入API
import { addTestApi, geTestsApi, updateTestApi } from '@/api/table'
import { deleteData, Formatter, getSubjectOption, pageSizeChange, tableDataProcess } from '@/utils/diy_funtion'
import { getJudgesApi, getSelectionsApi, getSinglesApi } from '@/api/problem'

export default {
  name: 'ExamList',
  filters: {
    Formatter
  },
  data() {
    return {
      listData: [],
      interimListData: [],
      editData: {},
      major_name: null,
      subject_name: null,
      editViews: false,
      singleDrawer: false,
      selectionsDrawer: false,
      judgeDrawer: false,
      editSingleDrawer: false,
      editSelectionsDrawer: false,
      editJudgeDrawer: false,
      loading: true,
      // 获取科目选项
      subjectOption: getSubjectOption(),
      tableConfig: {
        table_show: {
          key: 'ID',
          add_time: '创建时间',
          test_name: '考试名称',
          subject_name: '所属科目',
          // exam_deadline: '考试截止时间',
          time_limit: '考试时长(分钟)',
          exam_introduction: '考试介绍'
        },
        sortable: { key: true, add_time: true, subject_name: true },
        slots: [
          {
            slot_name: 'A',
            object_name: 'exam_deadline',
            label: '考试截止时间',
            align: 'center',
            width: 160
          },
          {
            slot_name: 'B',
            object_name: 'status',
            label: '未截止',
            align: 'center',
            width: 80
          }
        ],
        selection: true,
        align: 'center',
        operate: true
      },
      option: {
        option_name: ['考试名称', '科目名称', '介绍'],
        object_name: ['test_name', 'subject_name', 'exam_introduction']
      },
      addViews: false,
      add_data: {
        test_name: '',
        exam_introduction: '',
        exam_deadline: null,
        time_limit: null,
        subject_name: null,
        major_name: null,
        status: false,
        majorsList: [],
        subjectList: [],
        SinglesData: [],
        SinglesList: [],
        singles: [],
        selectionData: [],
        selectionList: [],
        selections: [],
        judgeData: [],
        judgeList: [],
        judges: []
      },
      add_rules: {
        test_name: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
        ],
        exam_deadline: [
          { required: true, message: '请选择截止日期', trigger: 'blur' }
        ],
        exam_introduction: [
          { required: true, message: '请输入介绍', trigger: 'blur' }
        ],
        time_limit: [
          { required: true, message: '请输入考试时长', trigger: 'blur' }
        ],
        subject_name: [
          { required: true, message: '请选择科目', trigger: 'blur' }
        ]
      },
      deleteArr: [],
      pageConfig: {
        total: 1,
        Page: 1,
        size: [10, 20, 50, 100],
        pagesSize: 10
      }
    }
  },
  computed: {
    // 根据专业获取科目选项
    subjectList: function() {
      const newSubjectList = []
      for (const k in this.add_data.subjectList) {
        if (this.add_data.subjectList[k].major_name === this.major_name) {
          newSubjectList.push(this.add_data.subjectList[k])
        }
      }
      return newSubjectList
    },
    SinglesList: function() {
      if (!this.subject_name) {
        return this.add_data.SinglesData
      }
      return this.add_data.SinglesData.filter((item) => {
        if (item.subject_name === this.subject_name) {
          return item
        }
      })
    },
    selectionList: function() {
      if (!this.subject_name) {
        return this.add_data.selectionData
      }
      return this.add_data.selectionData.filter((item) => {
        if (item.subject_name === this.subject_name) {
          return item
        }
      })
    },
    judgesList: function() {
      if (!this.subject_name) {
        return this.add_data.judgeData
      }
      return this.add_data.judgeData.filter((item) => {
        if (item.subject_name === this.subject_name) {
          return item
        }
      })
    }

  },
  created() {
    this.getListData()
  },
  methods: {
    // 换页
    pageSizeChange: pageSizeChange,
    // 删除表数据
    deleteData: deleteData,
    drawerClose() {
      this.major_name = null
      this.subject_name = null
    },
    getListData() {
      this.loading = true
      this.add_data.subject_list = []
      geTestsApi().then((response) => {
        for (const key in response.data.data) {
          response.data.data[key].exam_deadline = new Date(response.data.data[key].exam_deadline).getTime()
          const seArr = []
          const siArr = []
          const juArr = []
          for (const se in response.data.data[key].selections) {
            seArr.push(response.data.data[key].selections[se].key)
          }
          for (const si in response.data.data[key].singles) {
            siArr.push(response.data.data[key].singles[si].key)
          }
          for (const ju in response.data.data[key].judges) {
            juArr.push(response.data.data[key].judges[ju].key)
          }
          response.data.data[key].selections = seArr
          response.data.data[key].singles = siArr
          response.data.data[key].judges = juArr
        }
        const { newListData, data } = tableDataProcess(
          response.data.data,
          this.pageConfig.pagesSize
        )
        setTimeout(() => (this.loading = false), 500)
        this.pageConfig.total = data.length
        this.listData = newListData
        this.interimListData = data
      })
      // 获取单选表
      getSinglesApi().then((res) => {
        const SinglesData = []
        for (const f in res.data.data) {
          if (res.data.data[f].status) {
            SinglesData.push(res.data.data[f])
          }
        }
        this.add_data.SinglesData = SinglesData
      })
      // 获取多选表
      getSelectionsApi().then((res) => {
        const SelectionsData = []
        for (const f in res.data.data) {
          if (res.data.data[f].status) {
            SelectionsData.push(res.data.data[f])
          }
        }
        this.add_data.selectionData = SelectionsData
      })
      // 获取判断表
      getJudgesApi().then((res) => {
        const JudgesData = []
        for (const f in res.data.data) {
          if (res.data.data[f].status) {
            JudgesData.push(res.data.data[f])
          }
        }
        this.add_data.judgeData = JudgesData
      })
    },
    // 显示修改弹窗
    showUpData(data) {
      this.editData = {}
      // 对象深拷贝
      this.editData = JSON.parse(JSON.stringify(data))
      this.editViews = true
    },
    // 表多选时
    selectChange(v) {
      this.deleteArr = v
    },
    addData() {
      if (this.add_data.status) {
        this.add_data.status = 1
      } else {
        this.add_data.status = 0
      }
      const si = []
      const se = []
      const ju = []
      for (const key in this.add_data.singles) {
        si.push({ key: this.add_data.singles[key] })
      }
      for (const key in this.add_data.selections) {
        se.push({ key: this.add_data.selections[key] })
      }
      for (const key in this.add_data.judges) {
        ju.push({ key: this.add_data.judges[key] })
      }
      addTestApi({
        test_name: this.add_data.test_name,
        exam_introduction: this.add_data.exam_introduction,
        exam_deadline: this.add_data.exam_deadline,
        time_limit: this.add_data.time_limit,
        subject_name: this.add_data.subject_name,
        status: this.add_data.status,
        singles: si,
        selections: se,
        judges: ju
      }).then((response) => {
        this.getListData()
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      }).catch(() => {

      })
    },
    upData() {
      if (this.editData.status) {
        this.editData.status = 1
      } else {
        this.editData.status = 0
      }
      const si = []
      for (const key in this.editData.singles) {
        si.push({ key: this.editData.singles[key] })
      }
      const se = []
      for (const key in this.editData.selections) {
        se.push({ key: this.editData.selections[key] })
      }
      const ju = []
      for (const key in this.editData.judges) {
        ju.push({ key: this.editData.judges[key] })
      }
      this.editData.judges = ju
      this.editData.selections = se
      this.editData.singles = si
      updateTestApi(this.editData).then((response) => {
        this.getListData()
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      })
    },
    // 数据清除
    addRe() {
      this.add_data.test_name = null
      this.add_data.exam_deadline = null
      this.add_data.exam_introduction = null
      this.add_data.time_limit = null
      this.add_data.subject_name = null
      this.add_data.status = false
      this.add_data.singles = []
      this.add_data.selections = []
      this.add_data.exam_deadline = null
      this.add_data.judges = []
      Object.keys(this.editData).forEach(item => {
        if (item !== 'key') this.editData[item] = null
      })
    },
    // 换页
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.listData = value.data
      this.pageConfig.total = value.total
    }
  }
}
</script>

<style lang="scss">
.drawerCheckbox {
  display: block;
  padding: 7.5px;
  border-bottom: 2px solid #efefef;
}

.pop-div-my{
    display: none;
  }

</style>
